<template>
    <div class="Header">
        <div class="shopping_list_data">
            <div class="shopping" v-for="(item, index) in 6" :key="index" @mouseover="mouseover(index)"
                @click="$router.push('/product_detail')" @mouseout="mouseout">
                <div class="Overlay">
                    <div style="position: absolute;top: -12px;left: -12px;">
                        <img src="/src/assets/icons/no_first.png" alt="" style="width: 42px;height: 48px;">
                    </div>
                    <!-- <div class="Overlay_btn content_end column">
                        <div class="btn center c33">Аналогичные</div>
                        <div class="btn center c33" style="margin: 10px 0 36px 0;">
                            <img src="/src/assets/icons/shopping_cart.png" alt="">
                            <div class="mLeft8">Добавить</div>
                        </div>
                    </div> -->
                </div>
                <div class="Overlay_data">
                    <div class="img"></div>
                    <div class="name">Название продукта слишком длинное</div>
                    <div class="title">Доставка 48 часов/Проверка/Пакет</div>
                    <div class="items mTop16">
                        <div class="price">398 ₽</div>
                        <div class="line"></div>
                        <div class="num">Продано：2222</div>
                    </div>
                    <div class="progress">
                        <el-progress :percentage="50" :show-text="false" color="#FF831F" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" name="Shopping_list" setup>
import { ref, reactive } from "vue";
import { Search } from '@element-plus/icons-vue'

// 组件传来的值
defineProps({
    // xlink:href属性的前缀
    shoppingList: {
        type: Array,
        default: [],
    },
})

let radio = ref(false)
let num = ref(0)

let indexOf = ref(-1)

// console.log('mouseover移入事件');
function mouseover(e: number) {
    if (indexOf.value != e) {
        indexOf.value = e
    }
}

// console.log('mouseover移出事件');  ps暂未多做处理
function mouseout() {
}

function handleChange() {

}

</script>
<script lang="ts">
export default {
    name: 'Home'
}
</script>

<style lang="less" scoped>
.shopping_list_data {
    display: flex;
    flex-wrap: wrap;
    // width: 1416px;

    .shopping {
        width: 220px;
        height: 336px;
        border-radius: 8px;
        margin: 0 13px 13px 0;
        position: relative;
        top: 0;
        left: 0;

        .Overlay {
            position: absolute;
            z-index: 2;
            width: 220px;
            height: 336px;
            border-radius: 8px;

            .Overlay_btn {
                width: 100%;
                height: 100%;

                .btn {
                    width: 180px;
                    height: 48px;
                    border-radius: 8px;
                    margin-left: 0;
                    background-color: #FFFFFF;
                    font-family: PingFang SC;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 16px;
                    text-underline-position: from-font;
                    text-decoration-skip-ink: none;

                    img {
                        width: 24px;
                        height: 24px;
                    }
                }
            }
        }

        .Overlay_data {
            position: absolute;
            z-index: 1;

            .img {
                width: 220px;
                height: 220px;
                border-radius: 8px;
                background: #F6F6F6;
            }

            .name {
                width: 200px;
                height: 32px;
                font-family: PingFang SC;
                font-size: 16px;
                font-weight: 400;
                line-height: 16px;
                text-align: left;
                color: #333333;
                margin: 10px 10px 0 10px;
            }

            .title {
                width: 200px;
                height: 12px;
                font-family: PingFang SC;
                font-size: 12px;
                font-weight: 400;
                line-height: 12px;
                margin: 8px 10px 0 10px;
                color: #999999;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .price {
                width: 55px;
                height: 20px;
                top: 300px;
                left: 10px;
                font-family: PingFang SC;
                font-size: 20px;
                font-weight: 400;
                line-height: 20px;
                text-align: left;
                color: #FF831F;
                margin-left: 10px;
            }

            .line {
                width: 1px;
                height: 16px;
                top: 302px;
                left: 79px;
                background: #333333;
                margin: 0 21px 0 14px;
            }

            .num {
                height: 12px;
                font-family: PingFang SC;
                font-size: 12px;
                font-weight: 400;
                line-height: 12px;
                text-align: left;
                color: #999999;
                margin-right: 10px;
            }

            .progress {
                width: 200px;
                margin: 12px auto 0 auto;
            }
        }
    }
}
</style>